<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main'));

        // 3.2 指定图表的配置项和数据
        let option = {
            // 1.标题
            title: [
                {
                    text: '男女薪资分布',
                    left: 10,
                    top: 10,
                    textStyle: {
                        fontSize: 16,
                    },
                },
                {
                    text: '男生',
                    left: '50%',
                    top: '50%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: 12,
                    },
                },
                {
                    text: '女生',
                    left: '50%',
                    top: '90%',
                    textAlign: 'center',
                    textStyle: {
                        fontSize: 12,
                    },
                },
            ],
            // 2.鼠标移入提示
            tooltip: {
                trigger: 'item'
            },
            // 3.颜色
            color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
            // 4.内容
            series: [
                {
                    type: 'pie',
                    radius: 50,
                    radius: ['20%', '30%'],
                    center: ['50%', '30%'],
                    datasetIndex: 1,
                    data: [
                        { name: '1万以下', value: 4 },
                        { name: '1万-1.5万', value: 3 },
                        { name: '1.5万-2万以下', value: 2 },
                        { name: '2万以上', value: 3 },
                    ]

                },
                {
                    type: 'pie',
                    radius: 50,
                    radius: ['20%', '30%'],
                    center: ['50%', '75%'],
                    datasetIndex: 2,
                    data: [{ name: '1万以下', value: 4 },
                    { name: '1万-1.5万', value: 3 },
                    { name: '1.5万-2万以下', value: 2 },
                    { name: '2万以上', value: 3 },]
                }
            ]
        }

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
</body>

</html>